<template>
  <div class="dashboard-container">

    <el-tabs v-model="activeName">
      <el-tab-pane label="个人信息" name="first">
        <el-card style="width: 40%;">
          <el-form :model="formData"
                   :rules="rules"
                   ref="formData"
                   label-width="100px"
          >
            <el-form-item label="昵称"
                          prop="name"
            >
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="头像"
                          prop="avatar"
            >
              <uploadImg v-model="formData.avatar"></uploadImg>
            </el-form-item>
            <el-form-item label="用户名"
                          prop="username"
            >
              <el-input v-model="formData.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="性别"
                          prop="sex"
            >
              <el-radio-group v-model="formData.sex">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄"
                          prop="age"
            >
              <el-input v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="简介"
                          prop="info"
            >
              <el-input v-model="formData.info"></el-input>
            </el-form-item>
            <el-form-item
            >
              <el-button @click="updateManage">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="密码修改" name="second">
        <el-card style="width: 40%;">
          <el-form :model="formData"
                   :rules="rules"
                   ref="formDataPwd"
                   label-width="100px"
          >
            <el-form-item label="旧密码"
                          prop="oldPwd"
            >
              <el-input v-model="formData.oldPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码"
                          prop="newPwd"
            >
              <el-input v-model="formData.newPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="再次输入"
                          prop="againPwd"
            >
              <el-input v-model="formData.againPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item
            >
              <el-button @click="updatePwd">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import uploadImg from '@/components/ImageUpload'
import ImgPreview from '@/components/ImgPreview'
import { Message } from 'element-ui'
import { update as updateStu, get as getStu } from '@/api/Student/index'
import { update as updateTea, get as getTea } from '@/api/Teacher/index'

export default {
  name: 'Dashboard',
  components: {
    uploadImg, ImgPreview
  },
  data() {
    return {
      activeName: 'first',
      formData: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '请上传头像', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        againPwd: [
          { required: true, message: '请再次输入新密码', trigger: 'change' }
        ],
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    updatePwd() {
      this.$refs['formDataPwd'].validate((valid) => {
        if (valid) {
          if (this.formData.newPwd != this.formData.againPwd) {
            Message.warning('两次密码输入不一致')
            return
          }
          if (this.formData.oldPwd != this.formData.password) {
            Message.warning('旧密码不一致')
            return
          }
          let param = {}
          param.id = this.formData.id
          param.password = this.formData.newPwd
          let type = localStorage.getItem('examType')
          if (type == 1) {
            updateTea(param).then((res) => {
              Message.success('修改成功')
              this.init()
            })
          } else {
            updateStu(param).then((res) => {
              Message.success('修改成功')
              this.init()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateManage() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          let type = localStorage.getItem('examType')
          if (type == 1) {
            updateTea(this.formData).then((res) => {
              Message.success('修改成功')
              this.init()
            })
          } else {
            updateStu(this.formData).then((res) => {
              Message.success('修改成功')
              this.init()
            })
          }

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    init() {
      let id = localStorage.getItem('examId')
      let type = localStorage.getItem('examType')
      if (type == 1) {
        getTea(id).then((res) => {
          this.formData = res.data
        })
      } else {
        getStu(id).then((res) => {
          this.formData = res.data
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
